class FirstPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list:[],
            thumburl: '',
            name: '',
            id: '0',
            partcount: 1,
            parts: [{src:''  }, {src:''  }, {src:'' }],
            categorylist: [],
            select_swiperlink:{name:'请选择'},
            swiperimglist: [],
            category_select_list: [],
            recommendtablehtml: [],
            recommendlist: [],
            goods_select_html: [],
            currentswipertype:0,
            swiperlinkhtml:[],
            swipertablehtml:[],
            swiperimghtml:[],
            swiper:{
                imgs:[],
                links:[]
            },
            fileimgshow:!0,
            imgstate:'',
            imgsrc:'',
            to:'',
        };
    }




    componentDidMount() {
       
            this.freshlist()   
        
            }
        freshlist(){
            getLbimgsrc(res=>{
               if(res.issuccess==1){
               this.formatlist(res.list);      
               console.log(res.list)
           }
        })
       
                             


    }



    // goodsStyle(e) {

    //     var swiperlinkhtml = [],{goodslist,categorylist} = this.state,select_swiperlink ;
        
    //     if (e == 1) {
    //        goodslist.forEach((x, i) => {
    //             swiperlinkhtml.push(
    //                 <option key={'swiperlink_'+i} value={x.id}>{x.name}
    //                 </option>
    //             )
    //         });
    //         select_swiperlink={id:goodslist[0].id,name:goodslist[0].name,type:e}
    //     } else {
    //       categorylist.forEach((x, i) => {
    //             swiperlinkhtml.push(
    //                 <option key={'swiperlink_'+i} value={x.id}>{x.name}
    //                 </option>
    //             )
    //         });
    //         select_swiperlink={id:categorylist[0].id,name:categorylist[0].name,type:e}
    //     }
       
    //     $(`#goodsType${e}`).attr("checked", true);

    //     this.setState({
    //         swiperlinkhtml,
    //         currentswipertype:e,
    //         select_swiperlink
    //     });
    // }

    // swiperfilechange(e) {
    //     this.setState({
    //         finishupload: !1,
    //         uploadword: "上传"
    //     })  
    //     var that = this;
    //     var filedata = $('#file3')[0].files[0];

    //     var reader = new FileReader();
    //     reader.readAsDataURL(filedata);
    //     reader.onload = function (e) {
    //     var base64str = e.target.result;
    //     that.putswiperimglistdata([base64str])
    //     }
    // }

    // putswiperimglistdata(target) {
    //     //1.加入到swiper中，
    //     var that = this,{swiper,swiperimghtml} = this.state;

        
    //     target.forEach((x, i) => {
    //             let  src = x
    //             , onclicktap = that.del_swiper_img.bind(that, swiperimghtml.length);
    //         if (!isBase64(src)) {
    //             if (src.indexOf(`${API_HEAD}`) == -1) {
    //                 src = `${API_HEAD}imgs/${src}`
    //             }
    //         }
    //       //  var base64list = that.state[base64prop] || [];
    //         swiper['imgs'].push(src);
    //          //2.编写html代码，
    //          swiperimghtml.push(
    //             <div className={"swiperimg_div index" + swiperimghtml.length} key={swiperimghtml.length}>
    //                 <img key={swiperimghtml.length} src={src} className="img-responsive" />
    //                 <img key={"close_" + swiperimghtml.length} className='closeimg' onClick={onclicktap} src='./src/img_close.png' />
    //             </div>
    //         )



    //         that.setState({
    //             swiperimghtml,
    //             swiper
    //         })
    //       //  console.log(list, 'listlistlist');


    //     });

    // }

    // del_swiper_img(e) {
    //     var that = this,swiperimghtml = [], {swiper} = this.state,imgurl="";
    //     swiper['imgs'].splice(e, 1);
    //     swiper['imgs'].forEach((x, i) => {
    //         if(swiper['imgs'].indexOf("https")==-1){
    //             imgurl =  `${x}`
    //         }
    //         swiperimghtml.push(
    //             <div className={"detailimg_div index" + i} key={i}>
    //                 <img key={i} src={imgurl} className="img-responsive" />
    //                 <img key={"close_" + i} className='closeimg' onClick={that.del_swiper_img.bind(that, i)} src='./src/img_close.png' />
    //             </div>
    //         )
    //     })
    //     //console.log(swiper,'删除图片后的swiper');
        
    //     that.setState({
    //         swiperimghtml,
    //         swiper,

    //     })

    // }
/**xyj */
/**模态框 */
// confirmdel(){
//     let {delid,start}=this.state
//     Lbimgsdelimg(delid,res=>{
//     if(res.issuccess==1){
//         alert('删除成功')
//         $('#myModal').modal('toggle');
//         this.freshlist()
//     }else{
//         $('#myModal').modal('toggle');
//         alert(res.msg);
//     }
// })
// }

/**新建 */
add(e) {
    window.location.href = "./firstPagenewadd.html";
}

formatlist(list) {
    var listitem = [];
    list.forEach((x,i) => {
        listitem.push(
            <tr key={i}>
                {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                <td><p className="td-img"><img src={`${API_HEAD}imgs/${x.thumbpath}`}/></p></td> 
                {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                <td className="tconter">{x.type=="LISTEN"?'首页':x.type=="MAIN"?'线上借书':'优选购'}</td>
                <td className="tconter">{x.orders}</td> 
                <td className="operatebox">
                    <div className='operate' id={"ope"+x.id}>
                        <div data-toggle="modal" data-target="#modalOne">
                            <img src="./src/edit.png"/>
                            <p className='edit'  onClick={this.todetail.bind(this,x.id)}>编辑</p>
                        </div>
                        <div>
                            <img src="./src/sort.png"/>
                            <p className="edit" onClick={this.toorder.bind(this, x.id)}>排序</p>
                        </div>
                         {/* <div>
                            <img src={`./src/${x.state=="1"?"hide":"show"}.png`}/>
                            <p className='edit' onClick={this.setshow.bind(this,x.id,x.state)}>{x.state=="0"?"隐藏":"显示"}</p>
                        </div> */}
                        <div>
                            <img src="./src/del.png"/>
                            <p className='edit colred' onClick={this.del.bind(this,x.id)}>删除</p>
                        </div>
                    </div>
                 </td>
            </tr>
        )
    });
    this.setState({listitem,list,originallist:list})
}

    // 编辑
    todetail(e) {
        window.location.href = "./firstPagenewadd.html?id="+e;
    }
    // 排序
    toorder(id) {
        let orders = prompt("请输入1-999的正整数"), { start } = this.state
        if (orders == "" || orders == null) {
            return;
        }
        if (isNaN(orders) || orders < 1 || orders > 999) {
            return;
        }
        orders = Math.floor(orders);
        Swipersetorders({ id, orders }, res => {
            if (res.issuccess == 1) {
                alert("设置成功");
                this.freshlist(start);
            }
        });
    }
    // // 上架下架
    // setshow(e, i, cid) {
    //     let { start } = this.state
    //     Goodssetstate({ id: e, cid }, res => {
    //         if (res.issuccess == 1) {
    //             alert(`${i == "0" ? '下架' : '上架'}成功`)
    //             this.freshlist(start)
    //         }
    //     })
    // }
    // 删除
    del(e, cid) {
        this.setState({ delid: e, newcid: cid }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid,start } = this.state
        delimg( delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }


/**xyj end */



    // inputchange(i, e) {
    //     var parts = this.state.parts;
    //     parts[i]['name'] = e.target.value
    //     this.setState({ parts })
    // }
    // clickupload(e) {
    //     console.log('clickupload', e);
    //     $('#file' + e).click();
    // }
    // del_detail_img(e) {
    //     var parts = this.state.parts;
    //     parts[e]['src'] = '';
    //     this.setState({ finishupload: !1, parts })
    // }

    // getbase64url(index) {
    //     var that = this;
    //     var reader = new FileReader();
    //     reader.readAsDataURL($('#file' + index)[0].files[0]);
    //     reader.onload = function (e) {
    //         var thumburl = e.target.result;
    //         var parts = that.state.parts;
    //         parts[index]['src'] = thumburl;
    //         that.setState({ parts })

    //         //  that.putlistdata(filecode,[base64str])
    //     }
    // }

    // filechange0(e) {
    //     var that = this;
    //     this.setState({
    //         finishupload: !1,
    //         uploadword: "上传"
    //     })
    //     this.getbase64url(0)

    // }
    // filechange1(e) {
    //     var that = this;
    //     this.setState({
    //         finishupload: !1,
    //         uploadword: "上传"
    //     })
    //     this.getbase64url(1)

    // }
    // filechange2(e) {
    //     var that = this;
    //     this.setState({
    //         finishupload: !1,
    //         uploadword: "上传"
    //     })
    //     this.getbase64url(2)
    // }



    // //下载所有base64的图片并进行保存
    // upload() {
    //     var { partcount, parts, swiper } = this.state, err = '', newswiperist = [], that = this;
    //     for (let index = 0; index < partcount; index++) {
    //         var src = parts[index]['src'];
    //         if (isBase64(src)) {
    //             uploadimg(src, res => {
    //                 if (res.issuccess == 1) {
    //                     parts[index]['src'] = `${API_HEAD}imgs/${res.path}`

    //                 } else {
    //                     alert(res.msg)
    //                     err = 1
    //                     return;
    //                 }
    //             })
    //         }
    //     }

    //     swiper['imgs'].map((x,i) => {
    //         if (isBase64(x)) {
    //             uploadimg(x, res => {
    //                 if (res.issuccess == 1) {
    //                     newswiperist.push(res.path)//`${API_HEAD}imgs/${res.path}`)
    //                 } else {
    //                     alert(res.msg)
    //                     err = 1
    //                     return;
    //                 }
    //             })
    //         }else{
    //             newswiperist.push(x)
    //         }
    //     })
    //     swiper.imgs = newswiperist;
        
    //     this.setState({swiper})

    //     if (err == '') {
    //         this.setState({
    //             finishupload: !0,
    //             parts
    //         })
    //     }
    // }

    // edit(e) {
    // //    console.log('edit', e);
    //     window.location.href = './goods.html?id=' + e

    // }

    // changeswiperlink(e){
    //     let {currentswipertype} = this.state,prop = currentswipertype==0?'categorylist':'goodslist',list = this.state[prop];
    //     list.forEach(x=>{
    //         if(Number(x.id)==Number(e.target.value) ){
    //             let select_swiperlink={
    //                 id:x.id,
    //                 name:x.name,
    //                 type:currentswipertype
    //             }
    //             this.setState({select_swiperlink});
    //             console.log(select_swiperlink);
    //         }
    //     })
       
             
    // //   

        
    // }

    // onrecommendchange(i,e) {
    //     let prop = `goodsid${i}`
    //  //   console.log(i,'iii');
    //   //  console.log(prop,'prop');
        
    //     this.setState({ [prop]: e.target.value, })
    // }
    // oncategorychange(i, x) {
    //     var { parts } = this.state;
    //     parts[i]['cid'] = Number(x.target.value)
    //     this.setState({ parts })
    // }

    // addpart() {
    //     var partcount = this.state.partcount + 1;
    //     this.setState({ partcount });
    //     // let {parthtml} = this.state,count = parthtml.coun;
    //     // newparthtml.push(
    //     //     <div className='module_part'>
    //     //     <div className="input-group">
    //     //         <span className="input-group-addon">专区名称</span>
    //     //         <input id='name' onChange={this.inputchange.bind(this, 0)} value={parts[0]['name']} type="text" placeholder='请输入专区名称' className="form-control" />
    //     //     </div>
    //     //     <div className="input-group input-group ">
    //     //         <span className="input-group-addon desc">海报</span>
    //     //         <input onChange={this.filechange0.bind(this)} type='file' id='file0' />
    //     //         <div className='img_warp' >
    //     //             <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, 0)} style={{ display: parts[0]['src'].length > 0 ? "none" : "" }} />
    //     //             <img style={{ display: parts[0]['src'].length > 0 ? "block" : "none" }} src={parts[0]['src']} className="img-responsive" />
    //     //             <img className='closeimg thumb' style={{ display: parts[0]['src'].length > 0 ? "block" : "none" }} onClick={this.del_detail_img.bind(this, 0)} src='./src/img_close.png' />
    //     //         </div>
    //     //     </div>

    //     //     <div className="input-group">
    //     //         <span className="input-group-addon">商品类型</span>
    //     //         <select value={parts[0]['cid']} onChange={this.oncategorychange.bind(this, 0)} className="form-control select">
    //     //             {this.state.category_select_html}
    //     //         </select>
    //     //     </div>
    //     //     </div>

    //     // )

    // }

    // save() {
    //     var { partcount, parts, finishupload, categorylist, swiper } = this.state,part=[];
    //     // console.log(parts, 'parts');
    //   //   console.log(swiper, 'swiper');
    //      if (swiper.imgs.length == 0) {
    //         alert('请上传轮播图');
    //         return;
    //     }
    //     let p = !1;
    //     if(swiper.imgs.forEach(x=>{
    //         if(isBase64(x)){
    //             console.log('hasbase64');
    //             p = !0;
    //             return;
    //         }
    //     }))
    //     if(p){
    //         alert('请上传轮播图');
    //         return;
    //     }

       
    //     //  if(swiper['links'].length!=swiper['imgs'].length){
    //     //      alert('轮播图片与链接列表不一致');
    //     //      return;
    //     //  }
       
    //     for (let index = 0; index < partcount; index++) {
    //         let ids = this.state['checklist'+index]||'',item = parts[index];
    //     //    console.log(parts[index]['src'],'parts[index][]0');
    //         parts[index]['src'] = parts[index]['src'].replace(`${API_HEAD}imgs/`,'');
           
    //       //  console.log(parts[index]['src'],'parts[index][]1');

    //         // if(ids==''){
    //         //     alert('请添加商品')
    //         //     return
    //         // } 
    //         // item['ids'] = uniq(ids).join(',');
            
    //         // if(!ids){
    //         //     alert('请添加商品')
    //         //     return;
    //         // }
    //         // if(item.src.length==0){
    //         //     alert('请添加图片');
    //         // }
    //         // if(item.name.length==0){
    //         //     alert('请填写专区名称');
    //         // }
    //     }
    //     if (!finishupload) {
    //         alert('请上传图片');
    //         return;
    //     }

    //     if (swiper.imgs.length == 0) {
    //         alert('请上传轮播图');
    //         return;
    //     }
    //     console.log(swiper,'swiper');
    //       editmain({swiper:JSON.stringify(swiper) }, res => {
    //                 if (res.issuccess == 1) {
    //                     alert('保存成功');
    //                     window.location.href = './firstPage.html'
    //                 }
    //             })
    // }
    // //确定添加
    // confirm_recommend(i) {
    //     let checklist = this.state[`checklist${i}`]||[],
    //     {goodslist} = this.state,  
    //     id=this.state[`goodsid${i}`]||goodslist[0].id,
    //     html = this.state[`recommendtablehtml${i}`]||[];
        
    //  //   console.log(checklist,'checklist');

   
    //     if(checklist.indexOf(id)>-1) {
    //         alert('请不要重复添加')
    //         return;
    //     }
       
    //  //   console.log(typeof(id),'typeof',id);
    //   //  console.log('checklist',checklist);
         
        
    //     // var { recommendtablehtml, recommendlist, goodslist } = this.state, item = {};
    //     // checklist.push(Number(id));
    //    this.formatgoodslist(goodslist,html,i,id)


    // }

    // formatgoodslist(list,html,i,id){
    //     let that = this,checklist =this.state[`checklist${i}`]||[];
    //     let {parts} = this.state;
    //     if(!html)html=[];
        
    //     checklist.push(id) 
    //     if(list.length>0){
    //         list.forEach(x => {
    //             if (x.id == id)
    //             html.push(
    //                     <tr key={html.length}>
    //                         <td>{x.name}</td>
    //                         <td>{x.describe}</td>
    //                         <td className='operate'>
    //                             {/* <p className='edit' onClick={that.edit.bind(that, x.id)}>编辑</p> */}
    //                             <p onClick={that.del.bind(that, x.id,i)}>删除</p>
    //                         </td></tr>
    //                 )
    //             this.setState({ [`recommendtablehtml${i}`]:html,[`checklist${i}`]:checklist})
                
    //         })
    //     }
      

    // }
    // del(e,i) {
        
    //     var recommendtablehtml = this.state[`recommendtablehtml${i}`], checklist=this.state[`checklist${i}`],
    //     index = -1;
    //     checklist.forEach((x, i) => {
    //         if (x == e) {
    //             var list = checklist;
    //             index = i
    //             list.splice(i, 1);
    //             recommendtablehtml.splice(i, 1);
                
               
    //             this.setState({ [`recommendtablehtml${i}`]:recommendtablehtml, [`checklist${i}`]: list })
    //         }
    //     });
        
    // }
    // confirmswiper(){
    //     let {select_swiperlink,swiper} = this.state,swipertablehtml=[];
       
        
    //     if(swiper['imgs'].length-swiper['links'].length<=0){
    //         alert('图片数量与链接列表不一致');
    //         return;
    //     }
    //     console.log(select_swiperlink,"select_swiperlink");
    //     swiper['links'].push(select_swiperlink);
    //     swiper["links"].forEach((x,i)=>{
    //         swipertablehtml.push(
    //             <tr key={i}>
    //                         <td>{x.name}</td>
    //                         <td>{x.type==0?'列表':"商品"}</td>
    //                         <td className='operate'>
    //                             <p onClick={this.delswiper.bind(this, i)}>删除</p>
    //                         </td>
    //         </tr>
    //         );
            
    //     });
      
    //     this.setState({swiper,swipertablehtml})       
    // }

    // delswiper(e){
        
    //     let {swiper} = this.state,swipertablehtml=[];
    //     swiper["links"].splice(e,1);
       
    //     swiper["links"].forEach((x,i)=>{
    //         swipertablehtml.push(
    //             <tr key={i}>
    //                         <td>{x.name}</td>
    //                         <td>{x.type==0?'列表':"商品"}</td>
    //                         <td className='operate'>
    //                             <p onClick={this.delswiper.bind(this, i)}>删除</p>
    //                         </td>
    //         </tr>
    //         );
            
    //     });
    //     this.setState({swiper,swipertablehtml});
    // }

    render() {
        var { parts,select_swiperlink } = this.state;
        let{listitem,imgsrc,to} = this.state;
        return (
            <div  className="breadLinebox">
              <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className='content_wrap panel-default content_wrap'>
                    <div className='breadLine '>
                        当前位置 > 轮播管理
                        </div>
                    {/* <div className='inputs panel-body'>
                        <h3>首页管理</h3>
                    </div> */}
                    <div className="content form">
                        {/* <div style={{display:clicknew?"":"none"}} id="div"> */}
                      
                        <div className="tabletit" >
                            {/* <p className="delall"><img src="./src/delall.png"/>批量删除</p> */}
                            <p className="add" onClick={this.add.bind(this)}>新建</p>
                        </div>
                        <table className="tab">
                            <thead>
                            <tr>
                            {/* <th className="minwidth tconter"><img src="./src/notselection.png"/></th> */}
                            <th>轮播图片</th>
                            <th className="tconter">类型</th>
                            <th className="tconter">排序</th> 
                            <th className="cz tconter">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {listitem}
                            </tbody>
                        </table>
                   </div>
                
                </div >


            </div >
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='0' /> */}
        <LeftMenu code='firstPage' />
        <FirstPage />
    </div>
    //<Barrage/>
    , $('.container')[0]
)